<template>
	<view>
		<view class="orderBox">
			<view class="orderItem" v-for="orderItem in orderList" :key="orderItem.id">
				<image src="../../static/vip1.png" mode="widthFix"></image>
				<view class="titleBox">
					<text class="title">{{orderItem.title}}</text>
					<text>{{getTime(orderItem.tm)}}</text>
				</view>
				<view class="moneyText">
					<text>{{'-￥'+orderItem.price/100}}</text>
				</view>
			</view>
		</view>
		<Menu></Menu>
	</view>
</template>

<script>
import {parseUserData} from '../../hook/auth.js'
import api from '../../api/api.js'
import Menu from "../components/menu.vue"
	export default {
		components:{Menu},
		data() {
			return {
				userData:{},//用户信息
				orderList:[],//订单列表
			}
		},
		methods: {
			getTime(timestamp){
				const date = new Date(timestamp);
				// 提取年、月、日、时、分、秒
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');
				// 打印转换后的时间
				return`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			}
		},
		mounted() {
			this.userData = parseUserData()
			api.vipOrder({
				uid: this.userData.id,
				spec:{}
			}).then(res=>{
				this.orderList = res.data.list
				console.log(res)
			})
		}
	}
</script>

<style>
	.moneyText{
		position: absolute;
		/* width: 120px; */
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
	}
	.orderItem .titleBox .title{
		color: black;
		line-height: 30px;
	}
	.titleBox text{
		display: block;
		font-size: 16px;
		font-weight: 500;
		color: rgba(166, 166, 166, 1);
	}
	.titleBox{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		display: inline-block;
	}
	.orderItem image{
		width: 60px;
	}
	.orderItem{
		position: relative;
		width: 100%;
		height: 80px;
		padding: 10px 20px;
		box-sizing: border-box;
		margin: 10px 0;
		background-color: rgba(255, 255, 255, 1);
	}
	.orderBox{
		width: 100%;
		height: calc(100vh - 72px);
		box-sizing: border-box;
		padding: 0px 0;
		overflow-y: auto;
		overflow-x: hidden;
		background-color: rgba(204, 204, 204, 1);
	}
</style>
